<template>
  <div class="cs-page-container">
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="钻石" name="tab1" :lazy="true">
        <keep-alive>
          <TabDiamond v-if="activeTab === 'tab1'" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="视频卡" name="tab2" :lazy="true">
        <keep-alive>
          <TabVideoCard v-if="activeTab === 'tab2'" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="私聊券" name="tab3" :lazy="true">
        <keep-alive>
          <TabTicket v-if="activeTab === 'tab3'" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="积分" name="tab4" :lazy="true">
        <keep-alive>
          <TabScore v-if="activeTab === 'tab4'" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="语音卡" name="tab5" :lazy="true">
        <keep-alive>
          <TabVoiceCard v-if="activeTab === 'tab5'" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="花粉" name="tab6" :lazy="true">
        <keep-alive>
          <TabPollen v-if="activeTab === 'tab6'" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import TabDiamond from './components/TabDiamond'
import TabVideoCard from './components/TabVideoCard'
import TabTicket from './components/TabTicket'
import TabScore from './components/TabScore'
import TabVoiceCard from './components/TabVoiceCard'
import TabPollen from './components/TabPollen'
export default {
  components: { TabDiamond, TabVideoCard, TabTicket, TabScore, TabVoiceCard, TabPollen },
  data() {
    return {
      activeTab: 'tab1'
    }
  }
}
</script>
